<template>
  <div>
    <div>
      <van-nav-bar title="设置安全问题" left-text="返回" left-arrow @click-left="onClickLeft"/>
    </div>
    <div>
      <van-field
  readonly
  clickable
  name="picker"
  :value="value"
  label="安全问题"
  placeholder="请选择安全问题"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</van-popup>
    </div>
  <div>
    <van-cell-group>
  <van-field v-model="value3" label="问题答案" placeholder="请牢记问题答案，可用于找回密码" />
</van-cell-group>
  </div>
  <div class="SecureLogin">
    <van-cell-group>
  <van-field v-model="value4" label="安全问题" placeholder="我最新欢的一首歌是？" />
</van-cell-group>
<van-cell-group>
  <van-field v-model="value5" label="登录密码" placeholder="请输入登录密码" />
</van-cell-group>
  </div>
  <div class="word">
    <p>
      PS（给技术开发看）：如果用户之前设置过，进入该页面则
为重新设置新问题，此时显示下面的布局，安全问题显示
用户设置的问题，输入登录密码之后，用户可以修改安全
问题，改为上面的布局。<br>
如果之前没有设置过，则直接显示上面的布局，让用户
设置安全问题。
    </p>
  </div>
  <div class="BtnEventName">
<van-button type="info" style=" width: 345px;" @click="save">确定</van-button>

  </div>
  </div>
</template>

<script>
export default {
   data() {
    return {
      value: '',
      value3:'',
      value4:'',
      value5:'',
      columns: ['安全问题一', '安全问题二', '安全问题三', '安全问题三', '安全问题四'],
      showPicker: false,
    };
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onClickLeft() {
      this.$router.push({path:'set'})
    },
    save(){
      this.$router.push({path:'set'})
    }
  },

}
</script>

<style scoped>
.SecureLogin{
  margin-top: 98px;
}
.word{
  width: 368px;
	height: 126px;
  margin-left: 10px;
	color: rgba(80, 80, 80, 1);
	font-size: 14px;
	line-height: 150%;
	text-align: left;
	font-style: italic;
}
.BtnEventName{
  margin-top: 20px;
	height: 44px;
	color: rgba(255, 255, 255, 1);
	border-radius: 4px;
	font-size: 16px;
	line-height: 150%;
	text-align: center;
}
</style>